<template>
    <view class="jk-form-card">
        <view class="jk-form-card-title">
            <view class="flex-start-center">
                <slot name="header"></slot>
                <view>{{ title || '' }}</view>
            </view>

            <view hover-class="hoverClass">
                <slot name="right"></slot>
                <!--<u-icon v-if="showRightIcon" :name="iconName" size="24" @click="onRightIcon"></u-icon>-->
            </view>
        </view>
        <slot></slot>
    </view>
</template>
<script>
    export default {
        props: {
            title: {
                type: String,
                default: ''
            },
            showRightIcon: {
                type: Boolean,
                default: false
            },
            iconName: {
                type: String,
                default: 'scan'
            }
        },
        methods: {
            onRightIcon() {
                this.$emit('custom');
            }
        }
    }
</script>
<style scoped lang="scss">
.hoverClass {
    color: #2d8cf0;
}
.jk-form-card {
    background: #fff;
    padding: 32rpx 24rpx;
    border-radius: 16rpx;
    .jk-form-card-title {
        font-size: 32rpx;
        font-weight: 700;
        margin-bottom: 24rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

</style>
